<template>
  <div class="dashbord">
    <el-row :gutter="40" class="fat">
      <!-- 内容左侧 -->
      <el-col class="kk" :span="8"
        ><el-card shadow="hover" style="height: 285px">
          <el-row>
            <el-col :span="8">
              <el-avatar :size="120" :src="touxiang"></el-avatar>
            </el-col>
            <el-col :span="16">
              <div><h2 style="font-size: 30px">admin</h2></div>
              <div style="color: #999">超级管理员</div>
            </el-col>
          </el-row>
          <el-divider />
          <div>上次登录时间:</div>
          <div>上次登录地点:</div>
          <div>2019-11-01</div>
          <div>武汉</div> </el-card
        ><br />
        <el-card shadow="hover" style="height: 272px">
          <div style="text-align: start">&nbsp;&nbsp;&nbsp;语言详情</div>
          <br />
          <el-divider />
          <br />
          <div style="text-align: start">
            <div>Vue</div>
            <el-progress :percentage="71.3" color="#42B983"></el-progress>
            <div>JavaScript</div>
            <el-progress :percentage="24.1" color="#F1E05A"></el-progress>
            <div>CSS</div>
            <el-progress :percentage="3.7"></el-progress>
            <div>HTML</div>
            <el-progress :percentage="0.9" color="#F56C6C"></el-progress>
          </div>
        </el-card>
      </el-col>
      <!-- 内容右侧 -->
      <el-col class="kk" :span="16">
        <div class="cards">
          <!-- 1 -->
          <el-card
            v-for="(item, value) in 4"
            :key="value"
            shadow="hover"
            :body-style="{ padding: '0px' }"
          >
            <el-row :body-style="{ padding: '0px' }" class="father_userBg">
              <el-col :span="12" class="userBg">
                <i class="el-icon-user-solid userLogin"></i
              ></el-col>
              <el-col :span="12">
                <h1 class="h1 h16688">6688</h1>
                <span>用户访问量</span>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from "vue";
import { Row, Col, Card, Image, Avatar, Divider, Progress } from "element-ui";

Vue.use(Row)
  .use(Col)
  .use(Card)
  .use(Image)
  .use(Avatar)
  .use(Divider)
  .use(Progress);

import touxiang from "@/assets/touxiang.jpg";
export default {
  data() {
    return {
      touxiang,
    };
  },
};
</script>

<style lang="scss" scoped>
.dashbord {
  .kk {
    border: 1px solid #00f;
    .userLogin {
      width: 100%;
      padding: 10px;
      font-size: 60px;
      color: #e4820a;
      background-color: #ffe8a4;
      box-sizing: border-box;
    }
    .centerH80 {
      height: 100%;
    }
    .cards {
      display: flex;
      justify-content: space-around;
      .father_userBg {
        height: 88px;
        .userBg {
          height: 100%;
          background-color: #ffe8a4;
        }
      }
    }

    .h1 {
      font-size: 45px;
      font-weight: 700;
      color: #e4820a;
    }
    .h16688 {
      padding-right: 20px;
    }
  }
  >>> .fat {
    padding-top: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
</style>
